<template>
  <div>
    <!-- <h1>我的京东_我的购物车</h1> -->

    <app-top></app-top>
    <p class="shang" v-if="cartList.length != 0">
      <a href="/">继续购物</a>

      <a href="javaScript:;" @click="clearCart()">清空购物车</a>

      <a href="/order"> <img src="@/assets/images/gotoorder.jpg" /></a>
    </p>

    <div v-if="cartList.length == 0">
      <p style="text-align: center">
        <img src="@/assets/images/cart.jpg" />
      </p>
      <h2><a href="/">购物车控控如也,请取挑点东西吧~~~~~~~~</a></h2>
    </div>

    <table id="t1" cellspacing="0" width="80%" v-if="cartList.length != 0">
      <tr id="ctr">
        <th>缩略图</th>
        <th>商品名称</th>
        <th>商品种类</th>
        <th>商品单价</th>
        <th>购买数量</th>
        <th>库存数量</th>
        <th>总价</th>
        <th>删除</th>
      </tr>

      <tr v-for="(item, index) in cartList" :key="item.id">
        <td>
          <img
            width="80px"
            height="100"
            :src="item.product.prodImage"
            class="prod"
          />
        </td>
        <td>{{ item.product.prodName }}</td>
        <td>{{ item.product.typeName }}</td>
        <td>￥{{ item.product.price }}</td>
        <td>
          <input
          style="text-align:center"
            type="number"
            v-model="item.buynum"
            size="5"
            @change="changeNum(index)"
          />
        </td>

        <td>
          <span id="huo" v-if="item.product.pnum >= item.buynum">有货</span>
          <span id="huo" v-else>库存不足</span>
        </td>

        <td class="preTotal">￥{{ item.product.price * item.buynum }}</td>

        <td>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delCart(item.id)"
          ></el-button>
        </td>
      </tr>
    </table>

    <p v-if="totalPrice && totalPrice!=0.00">
      <span id="totalPrice">总计:￥{{ totalPrice }}</span>
    </p>
  </div>
</template>

<script>
import AppTop from '@/components/home/AppTop.vue'
//1 修改数量
//2 删除
//3 继续购物
//4 清空购物车
import { userCart, updateCart, delCartById ,clearCart} from "@/api/cart.js";

export default {
  data() {
    return {
      cartList: [],

      totalPrice: 0,
    };
  },

  created() {
    this.getList();
  },

  components: {AppTop},

  methods: {
    //清空购物车
    clearCart(){
      clearCart().then(resp=>{
        if(resp.code == 2000){
          this.cartList = [];
          this.totalPrice = 0;
        }
      })
    },
    getList() {
      userCart().then((resp) => {
        this.cartList = resp.data;
        this.totalPrice = this.jisuan();
      });
    },

    changeNum(index) {
      let cart = this.cartList[index];
      if (cart.buynum <= 0) {
        alert("购买数量小于1");
        return;
      }

      updateCart(cart).then((resp) => {
        if (resp.code == 2000) {
          this.getList();
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },

    delCart(id) {
      this.$confirm("此操作将从购物车删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delCartById(id).then((resp) => {
          if (resp.code == 2000) {
            this.getList();
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
        });
      });
    },
    jisuan() {
      let sum = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        let cart = this.cartList[i];
        sum += cart.buynum * cart.product.price;
      }
      return sum.toFixed(2);
    },
  },
};
</script>

<style scoped>
img{
  vertical-align: middle;
}
#ctr th {

  padding: 20px 20px;

  border-bottom: 1px #666 solid;
}

tr td{
  padding: 5px 0px;
}

.shang {
  border-bottom: 1px #666 solid;
  padding: 10px 0px;
}
.shang a{
  margin: 0px 10px;
  text-decoration: none;
}
.shang a:hover{
  text-decoration: underline;
}
.prod {
  border-radius: 5px;
}
table {
  margin: auto;
  text-align: center;

  border-bottom: 1px #666 solid;
}
p {
  text-align: right;
}

#totalPrice {
  color: red;
  font-size: 30px;
  margin-right: 200px;
}

h2 {
  text-align: center;
  margin-top: 50px;
}
</style>